<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- <img id="scream" src="./img/02.jpg" alt="The Scream" width="220" height="277"> -->
    <div><button @click="click">點我一下</button></div>
    <canvas
      id="canvas"
      width="740"
      height="470"
    ></canvas>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      url: require("./img/02.jpg"),
      img: new Image(), // 背景图片缓存
      context: {},// canvas对象
    }
  },
  methods: {
    initCanvas () {
      console.log("初始化canvas")
      const canvas = document.getElementById('canvas');
      this.ctx = canvas.getContext('2d');
    },
    initImg () {
      // 初始化背景图片
      this.img.setAttribute('crossOrigin', 'Anonymous')
      this.img.src = this.url;
      this.img.onerror = () => {
        var timeStamp = +new Date()
        this.img.src = this.url + '?' + timeStamp
      }
    },
    click () {
      var scream = document.getElementById("scream");
      console.log(scream);
      console.log(this.img);
      this.ctx.drawImage(this.img, 10, 10);//drawImage(image,x,y)
    },
  },
  mounted () {
    this.initCanvas();
    this.initImg();
  }
}
</script>
<style scoped>
#canvas {
  border: 1px solid rgb(199, 198, 198);
}
</style>
